<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <meta name="description" content="Scaleable color picker.">
    <meta name="author" content="Juho Vepsäläinen">

    <title>colorjoe by bebraw</title>

    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/pygment_trac.css">
    <link rel="stylesheet" href="css/iehacks.css">
    <link rel="stylesheet" href="css/colorjoe.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>colorjoe</h1>
        <p>Scaleable color picker (MIT).</p>
        <p class="view"><a href="https://github.com/bebraw/colorjoe">View the Project on GitHub <small>bebraw/colorjoe</small></a></p>
        <ul>
          <li><a href="https://github.com/bebraw/colorjoe/zipball/master">Download <strong>ZIP File</strong></a></li>
          <li><a href="https://github.com/bebraw/colorjoe/tarball/master">Download <strong>TAR Ball</strong></a></li>
          <li><a href="https://github.com/bebraw/colorjoe">View On <strong>GitHub</strong></a></li>
        </ul>
      </header>
      <section>

        <p>Unlike many other colorpickers out there, colorjoe is truly scaleable.
        It is based on CSS and does not depend on external images. As a result,
        you can tweak its size to fit your purposes. Supports touch and AMD
        module definition as well.</p>

        <p>Study the source of this page to get started. You might also check out
        the <a href="https://github.com/bebraw/colorjoe/blob/master/README.md">README</a>
        for some additional details and API documentation.
        </p>

      </section>
      <section>

        <h2>RGB Picker</h2>

        <div id="rgbValue"></div>

        <div id="rgbPicker"></div>

        <h2>RGB Picker with Extras</h2>

        <div id="extraPicker"></div>

        <h2>HSL Picker with Extras</h2>

        <div id="hslaValue"></div>

        <div id="hslPicker"></div>

        <h2>Closeable Picker</h2>

        <div class="container">
            <a href="#" id="showPicker">Show</a>
            <div id="closeablePicker"></div>
        </div>

      </section>
    </div>
    <footer>
      <p>Project maintained by <a href="https://github.com/bebraw">bebraw</a></p>
      <p>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></p>
    </footer>

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript">
      (function () {
          defer = (function (document, script) {
              var scripts = {},
                  firstScript = document.getElementsByTagName(script)[0];

              return function (url, callback) {
                  var inc;

                  if (typeof scripts[url] === 'undefined') {
                      inc = document.createElement(script);
                      inc.async = true;
                      inc.src = url;
                      if (callback) {
                          inc.onload = function () {
                              if (!inc.onloadDone) {
                                  inc.onloadDone = true;
                                  callback();
                              }
                          };
                          inc.onreadystatechange = function () {
                              if (inc.readyState === "loaded" || inc.readyState === "complete") {
                                  inc.onload();
                              }
                          };
                      }
                      firstScript.parentNode.insertBefore(inc, firstScript);
                      scripts[url] = inc;
                  } else {
                      if (callback) {
                          callback();
                      }
                  }
              };
          }(document, 'script'));

          defer('js/scale.fix.js', function() {
              fixScale(document);
          });
          defer('dist/colorjoe.js', function () {
              var val = document.getElementById('rgbValue');
              var hVal = document.getElementById('hslaValue');

              colorjoe.registerExtra('text', function(p, joe, o) {
                  e(p, o.text? o.text: 'text')
              });

              function e(parent, text) {
                  var elem = document.createElement('div');
                  elem.innerHTML = text;
                  parent.appendChild(elem);
              }

              colorjoe.rgb('rgbPicker').on('change', function(c) {
                  val.innerHTML = c.css();
              }).update();
              colorjoe.rgb('extraPicker', '#113c38', [
                  'close',
                  'currentColor',
                  ['fields', {space: 'RGB', limit: 255, fix: 2}],
                  'hex',
                  'text',
                  ['text', {text: 'param demo'}]
              ]);
              colorjoe.hsl('hslPicker', '#113c38', [
                  'alpha',
                  'currentColor',
                  ['fields', {space: 'HSLA', limit: 100}],
                  ['fields', {space: 'CMYKA', limit: 100}],
                  'hex'
              ]).on('change', function(c) {
                  hVal.innerHTML = 'Alpha: ' + c.alpha().toFixed(2);
              }).update();
              var cj = colorjoe.rgb('closeablePicker', 'red', [
                  'close',
                  'currentColor'
              ]);
              document.getElementById('showPicker').onclick = function(e) {
                  e.preventDefault();

                  cj.show();
              };
          });
      }());
    </script>
  </body>
</html>
